<template>
	<view class="tab-page">
		<view class="bgLine">
			<u-search v-model="searchText" height="80" :show-action="false" bg-color="#fff" shape="square"
				placeholder="请输入内容">
			</u-search>
		</view>
		<view class="chatContent pL15 pR15 pT15">
			<view class="flex alg-center u-border-bottom  pB10"
				@click="xf.onlineUtils.route(`/pages/common/systemMsgLis/index`)">
				<!-- #ifdef MP-COMPANY || MP-USER-->
				<image class="imgW90" :src="resources.xttzBlue" mode=""></image>
				<!-- #endif -->

				<!-- #ifdef MP-ECONOMIC  -->
				<image class="imgW90" :src="resources.xttzGreen" mode=""></image>
				<!-- #endif -->
				<view class="mL10" style="width: calc(100% - 110rpx);">
					<view class="flex jst-between alg-center">
						<text class="font32 bold">系统消息</text>
						<text class="u-9 font12">{{toText(readInfo.date)}}</text>
					</view>
					<view class="flex jst-between alg-center mT5">
						<text class="u-9 font13 w85 txt-ellipsis">{{readInfo.content||'暂无未读消息~'}}</text>
						<uni-badge v-show="readInfo.num>0" :max-num="99" :text="readInfo.num" />
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
			<view v-for="(chat, index) in chatStore.chats" :key="index" class="pL15 pR15">
				<long-press-menu v-if="isShowChat(chat)" :items="menu.items" @select="onSelectMenu($event, index)">
					<chat-item :chat="chat" :index="index" :active="menu.chatIdx == index"></chat-item>
				</long-press-menu>
			</view>
		</scroll-view>
		<!-- #ifdef MP-USER -->
		<xfUserTabbar></xfUserTabbar>
		<!-- #endif -->
		<!-- #ifdef MP-COMPANY -->
		<xfCompanyTabbar></xfCompanyTabbar>
		<!-- #endif -->
		<!-- #ifdef MP-ECONOMIC -->
		<xfEconomicTabbar></xfEconomicTabbar>
		<!-- #endif -->
	</view>
</template>

<script>
	import longPressMenu from "@/components/chat/long-press-menu/long-press-menu.vue"
	import chatItem from "@/components/chat/chat-item/chat-item.vue"
	import {toTimeText} from "@/utils/common/date.js"
	export default {
		components: {
			longPressMenu,
			chatItem
		},
		data() {
			return {
				showSearch: false,
				searchText: "",
				readInfo:{
					num:0,
					date:'',
					content:''
				},
				menu: {
					show: false,
					style: "",
					chatIdx: -1,
					isTouchMove: false,
					items: [{
							key: 'DELETE',
							name: '删除该聊天',
							icon: 'trash',
							color: '#e64e4e'
						},
						{
							key: 'TOP',
							name: '置顶该聊天',
							icon: 'arrow-up'
						}
					]
				}
			}
		},
		methods: {
			toText(val){
				if(val){
					return toTimeText(val)
				}else{
					return ''
				}
				
			},
			onSelectMenu(item, chatIdx) {
				switch (item.key) {
					case 'DELETE':
						this.removeChat(chatIdx);
						break;
					case 'TOP':
						this.moveToTop(chatIdx);
						break;
					default:
						break;
				}
				this.menu.show = false;
			},
			removeChat(chatIdx) {
				this.chatStore.removeChat(chatIdx);
			},
			moveToTop(chatIdx) {
				this.chatStore.moveTop(chatIdx);
			},
			isShowChat(chat) {
				if (chat.delete) {
					return false;
				}
				return !this.searchText || chat.showName.includes(this.searchText)
			},
			onSearch() {
				this.showSearch = !this.showSearch;
				this.searchText = "";
			},
			refreshUnreadBadge() {
				if (this.unreadCount > 0) {
					console.log(this.unreadCount)
				} else {}
			}
		},
		computed: {
			unreadCount() {
				let count = 0;
				this.chatStore.chats.forEach(chat => {
					if (!chat.delete) {
						count += chat.unreadCount;
					}
				})
				return count;
			},
			loading() {
				return this.chatStore.isLoading();
			},
			initializing() {
				return !getApp().$vm.isInit;
			}
		},
		watch: {
			unreadCount(newCount, oldCount) {
				this.refreshUnreadBadge();
			}
		},
		async onShow() {
			this.refreshUnreadBadge();
			this.readInfo = await this.chatStore.sysNoRead()
		}
	}
</script>

<style lang="scss">
	.bgLine {
		padding: 30rpx 30rpx 50rpx 30rpx;
		position: relative;
		z-index: 5;
		/* #ifdef MP-COMPANY */
		background-color: #EBF0FF;
		/* #endif */
		/* #ifdef MP-USER */
		background-color: #E1EEFF;
		/* #endif */
		/* #ifdef MP-ECONOMIC */
		background-color: #EBFCFF;
		/* #endif */
	}

	.chatContent {
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
		z-index: 10;
		margin-top: -25rpx;
		background: #fff;
	}

	.tab-page {
		position: relative;
		display: flex;
		flex-direction: column;

		.chat-tip {
			position: absolute;
			top: 400rpx;
			padding: 50rpx;
			line-height: 50rpx;
			text-align: center;
			color: #999;
		}

		.chat-loading {
			display: block;
			width: 100%;
			height: 120rpx;
			background: white;

			color: #999;

			.loading-box {
				position: relative;
			}
		}

		.scroll-bar {
			flex: 1;
			height: 100%;
		}
	}
</style>